<template>
    <div class="parallax_box" @scroll="onScrollChange">
        <div class="parallax_slow" :style="{ top: slowTop }">
            <slot name="slow"></slot>
        </div>
        <div class="parallax_fast">
            <slot></slot>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            slowTop: 0,
            SPEED_DIFF: 2,
        }
    },
    methods: {
        onScrollChange(e) {
            const scrollTop = e.target.scrollTop
            this.slowTop = scrollTop / this.SPEED_DIFF + 'px'
        },
    },
}
</script>

<style lang='scss'>
.parallax_box {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    .parallax_slow {
        position: relative;
        top: 0;
    }
    .parallax_fast {
        position: relative;
        background: #fff;
    }
}
</style>
